<template>
	<view class="bgColor">
		<view v-if="navigatorType == 2">
			<view class="status_bar"></view>
			<view class="status_bar_bottom"></view>
			<view class="viewHeader">
				<image @click="goBack" class="leftIco" src="../../static/fanhui.png"></image>
				个人中心
			</view>
			<view style="height: 45px;"></view>
		</view>
		<watermark></watermark>
		<view class="person-wx" v-if="userInfo" :style="navigatorType == 2 ? '' : 'padding-top: 150rpx;'">
			<view class="person-wx-user">
				<image class="person-wx-avatar" @click="$fc.previewImagesolo(userInfo.portrait)" :src="userInfo.portrait" mode="aspectFill"></image>
				<view class="person-wx-user-detail" @click="goPersonDetail">
					<view class="person-wx-nikename">{{userInfo.nickName}}</view>
					<view class="person-wx-name">
						<text class="text">手机：{{userInfo.phone}}</text>
						<image class="person-wx-fcode" src="../../static/wx/t05.png" mode="aspectFill"></image>
						<uni-icons class="person-wx-right" type="right" size="26" color="#676767"></uni-icons>
					</view>
				</view>
			</view>
		</view>
		<tool-list-wx :list="fuwu"></tool-list-wx>
		<tool-list-wx :list="shoucang"></tool-list-wx>
		<tool-list-wx :list="shezhi"></tool-list-wx>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				fuwu: [
					// {
					// 	title: '服务(未开通)',
					// 	path: '',
					// 	icon: '../../static/wx/t06.png',
					// 	else: []
					// },
				],
				shoucang: [
						{
						title: '收藏',
						path: this.$fc.get_package_name()+'favorites/index',
						icon: '../../static/wx/t07.png',
						else: []
					},{
						title: '朋友圈',
						path: this.$fc.get_package_name()+'friendsCircle/person',
						icon: '../../static/wx/t01.png',
						else: []
					},
					// {
					// 	title: '卡包(未开通)',
					// 	path: '',
					// 	icon: '../../static/wx/t10.png',
					// 	else: []
					// },{
					// 	title: '表情(未开通)',
					// 	path: '',
					// 	icon: '../../static/wx/t09.png',
					// 	else: []
					// },
				],
				shezhi: [{
					title: '设置',
					path: '../system/index',
					icon: '../../static/wx/t04.png',
					else: []
				}]
			}
		},
		computed:{
			userInfo(){
				return this.$store.state.userInfo
			},
			navigatorType() {
				return this.$store.state.navigatorType;
			}
		},
		methods: {
			viewLoad(){
				
			},
			viewShow(){
				this.$store.dispatch('tabBarpull')
			},
			viewRefresh(){
				uni.stopPullDownRefresh();
			},
			viewBottom(){
				
			},
			viewScroll(e){
				
			},
			goPersonDetail(){
				uni.navigateTo({
					url:this.$fc.get_package_name()+'personDetail/index'
				})
			},
			goBack(){
				uni.navigateBack();
			}
		}
	}
</script>

<style scoped>
	/* #ifdef APP-PLUS */
	.bgColor{
	    position: fixed;
	    top: 0;
	    left: 0;
	    right: 0;
	    bottom: 0;
	    background: #EDEDED;
	    z-index: -1;
		overflow: auto;
	  }
	/* #endif */
	/* #ifdef H5 */
	page{
		background: #EDEDED;
	}
	/* #endif */
	.person-wx {
		margin-bottom: 14rpx;
		background-color: #fff;
		padding: 44rpx;
		padding-right: 24rpx;
	}

	.person-wx-user {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.person-wx-avatar {
		width: 114rpx;
		min-width: 114rpx;
		height: 114rpx;
		margin-right: 28rpx;
		border-radius: 16rpx;
	}

	.person-wx-user-detail {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		overflow: hidden;
		padding-top: 10px;
	}

	.person-wx-nikename {
		font-size: 36rpx;
		font-weight: bold;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.person-wx-name {
		margin-top: 5px;
		color: #999;
		font-size: 28rpx;
		display: flex;flex-direction: row;align-items: center;
	}
	.person-wx-name .text{
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.person-wx-fcode{
		width: 46rpx;
		height: 46rpx;
		margin-left: auto;
		margin-right: 40rpx;
	}
	.person-wx-right{
	}
	.status_bar{
		height: var(--status-bar-height);
		width: 100%;
		z-index: 999;
		position: fixed;
		top: 0;
		left: 0;
		background: #FFFFFF;
	}
	.status_bar_bottom{
		width: 100%;
		height: var(--status-bar-height);
	}
	.viewHeader{
		width: 100%;
		height: 45px;
		line-height: 45px;
		text-align: center;
		color: #000;
		background: #FFFFFF;
		font-size: 18px;
		position: fixed;
		top: var(--status-bar-height);
		left: 0;
		z-index: 999;
	}
	.rightIco{
		position: absolute;
		right: 15px;
		width: 22px;
		height: 22px;
		top: 12px;
		vertical-align: bottom;
	}
	.leftIco{
		position: absolute;
		left: 20px;
		width: 18px;
		height: 18px;
		top: 13px;
		vertical-align: bottom;
	}
</style>
